<!--
    create  by Yang
    后台:首页=>管理员用户登录数据统计

-->
<template>
    <div class="rankingTop-container ">
        <div class="extra-wrapper"  style="text-align: right;">
            <div class="extra-item">
                <a
                        class="box1-item"
                        v-for="(item, index) in menu"
                        :class="{ 'red-link':index === isActive }"
                        v-on:click.stop.prevent='switchTab(index)'>
                    {{ item }}
                </a>
            </div>
        </div>
        <div class="chart" id="chart_top1"></div>
    </div>
</template>

<script>
  import echarts from 'echarts'
  import { getAction } from '@/api/manage'
  export default {
    name: 'IndexTopRanking',
    data() {
      return {
          xTime: [],// x轴数据，显示时间
          ipData:[], // 登陆人数
          visitData:[], // 访问人数
          isActive: 0,
          state: 1,
          dataInfo: {
              xTime :[],
              ipData:[],
              visitData:[]
          },
          menu: ['近一周', '近一月'],
      }
    },
    created(){
      this.getDataSource();
    },
    methods: {
        // a标签改变的方法
        switchTab: function(index) {
            this.isActive = index
            this.state = index+1
            this.xTime = []
            this.ipData = []
            this.visitData = []
            this.getDataSource()
        },

        async getDataSource() {
            let params = {
                state: this.state
            }
            let res = await getAction('/sys/visitInfo', params)
            if (res && res.success) {
                let result = res.result || [];
                result.forEach((item,index) => {
                    this.xTime.push(item['type'])
                    this.ipData.push(item['ip'])
                    this.visitData.push(item['visit'])
                });
            }
            this.getEchartTop1()
      },

      getEchartTop1() {
        // 初始化echarts的实例对象
        let myChart = this.$echarts.init(document.getElementById('chart_top1'))
        let option = {
          title: {
            textStyle: {
              align: 'center',
              color: '#fff',
              fontSize: 20,
            },
            top: '5%',
            left: 'center',
          },
          legend: {
            data: ['登录人数', '访问人数'],
            textStyle: {
              fontSize: 14,
              color: 'F1F1F3'
            },
            bottom:'0',
            right:'5%'

          },

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color:  '#00b3f4' , //左边线的颜色
              }
            },
            splitArea: {
              // show: true,
              color: '#f00',
              lineStyle: {
                color: '#f00'
              },
            },
            axisLabel: {
              color: '#b1e1f3'
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            // X轴数据
            data: this.xTime,

          }],

          yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: '#d1e6eb',

              },
            },
            axisTick: {
              show: false,
            },
          }],
          series: [{
            name: '登录人数',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 15,
            lineStyle: {
              normal: {
                color: "#00b3f4",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#00b3f4',
              }
            },
            itemStyle: {
              color: "#00b3f4",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: true
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,179,244,0.3)'
                },
                  {
                    offset: 1,
                    color: 'rgba(0,179,244,0)'
                  }
                ], false),
                shadowColor: 'rgba(0,179,244, 0.9)',
                shadowBlur: 20
              }
            },
            // 登陆人数
            data: this.ipData,
          },
            {
              name: '访问人数',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: 'circle',
              symbolSize: 15,
              lineStyle: {
                normal: {
                  color: "#00ca95",
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#00ca95',
                }
              },

              itemStyle: {
                color: "#00ca95",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              // 提示框
              tooltip: {
                show: true
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,0.3)'
                  },
                    {
                      offset: 1,
                      color: 'rgba(0,202,149,0)'
                    }
                  ], false),
                  shadowColor: 'rgba(0,202,149, 0.9)',
                  shadowBlur: 20
                }
              },
              // 访问人数
              data: this.visitData,
            },
          ]
        };
        myChart.setOption(option, true)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
    .rankingTop-container {
        .extra-wrapper {
            line-height: 55px;
            padding-right: 24px;

            .extra-item {
                display: inline-block;
                margin-right: 24px;

                a {
                    margin-left: 20px;
                }

                .red-link {
                    color: #01B8F3;
                }
            }
        }
        .chart {
            height: 5rem;
        }
    }
</style>
